<template>
  <div 
    ref="watermarkRef"
    class="bx-watermark"
    :style="containerStyle"
  >
    <slot></slot>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'

export default {
  name: 'BxWatermark',
  props: {
    text: {
      type: String,
      default: ''
    },
    image: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 120
    },
    height: {
      type: Number,
      default: 64
    },
    gapX: {
      type: Number,
      default: 24
    },
    gapY: {
      type: Number,
      default: 48
    },
    zIndex: {
      type: Number,
      default: 9999
    },
    rotate: {
      type: Number,
      default: -22
    },
    fontColor: {
      type: String,
      default: 'rgba(0,0,0,.15)'
    },
    fontSize: {
      type: Number,
      default: 16
    },
    fontFamily: {
      type: String,
      default: 'sans-serif'
    },
    fontWeight: {
      type: String,
      default: 'normal'
    }
  },
  setup(props) {
    const watermarkRef = ref(null)
    const base64Url = ref('')

    const containerStyle = computed(() => ({
      position: 'relative',
      zIndex: props.zIndex
    }))

    const createWatermark = () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')

      const ratio = window.devicePixelRatio || 1
      const canvasWidth = (props.width + props.gapX) * ratio
      const canvasHeight = (props.height + props.gapY) * ratio
      canvas.setAttribute('width', canvasWidth)
      canvas.setAttribute('height', canvasHeight)

      ctx.translate(canvasWidth / 2, canvasHeight / 2)
      ctx.rotate((Math.PI / 180) * props.rotate)
      ctx.translate(-canvasWidth / 2, -canvasHeight / 2)

      if (props.image) {
        const img = new Image()
        img.crossOrigin = 'anonymous'
        img.referrerPolicy = 'no-referrer'
        img.src = props.image
        img.onload = () => {
          ctx.drawImage(img, 0, 0, props.width * ratio, props.height * ratio)
          base64Url.value = canvas.toDataURL()
          applyWatermark()
        }
        img.onerror = () => {
          console.error('水印图片加载失败')
          base64Url.value = '' // 清空水印
          applyWatermark()
        }
      } else if (props.text) {
        ctx.font = `${props.fontWeight} ${props.fontSize * ratio}px ${props.fontFamily}`
        ctx.fillStyle = props.fontColor
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(props.text, canvasWidth / 2, canvasHeight / 2)
        base64Url.value = canvas.toDataURL()
        applyWatermark()
      }
    }

    const applyWatermark = () => {
      if (!watermarkRef.value) return

      const style = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background-repeat: repeat;
        background-position: 0 0;
        background-image: url(${base64Url.value});
      `
      let watermarkDiv = watermarkRef.value.querySelector('.bx-watermark__content')
      if (!watermarkDiv) {
        watermarkDiv = document.createElement('div')
        watermarkDiv.className = 'bx-watermark__content'
        watermarkRef.value.appendChild(watermarkDiv)
      }
      watermarkDiv.setAttribute('style', style)
    }

    watch(() => [props.text, props.image, props.width, props.height, props.gapX, props.gapY, props.rotate, props.fontColor, props.fontSize, props.fontFamily, props.fontWeight], () => {
      createWatermark()
    }, { immediate: true })

    onMounted(() => {
      createWatermark()
    })

    return {
      watermarkRef,
      containerStyle
    }
  }
}
</script>

<style scoped>
.bx-watermark {
  position: relative;
  overflow: hidden;
}

.bx-watermark__content {
  /* Styles applied dynamically by JavaScript */
}
</style>

